<template>
  <div v-if="show">
    <transition enter-class="a-wrap-animate" leave-active-class="a-wrap-animate">
      <div class="a-wrap2" v-show="alertShow"></div>
    </transition>
    <div class="a-wrap">
      <transition enter-class="popup-animate" leave-active-class="popup-animate-out">
        <div class="popup-wrap" v-show="alertShow">
          <div class="popup-inner">
            <div class="popup-text">
              {{content}}
            </div>
            <div class="popup-input-wrap" v-if="prompt">
              <input type="text" class="popup-input" :placeholder="placeholder" v-model="promptValue">
            </div>
          </div>
          <div class="popup-buttons">
            <span class="popup-button"
                  v-if="buttons.length"
                  v-for="(i,index) in buttons"
                  :key="index"
                  @click="_btnClick(index)">
                {{i}}
            </span>
          </div>
        </div>
      </transition>
    </div>
  </div>
</template>

<script>
  export default {
    props: {
      show: {
        type: Boolean,
        default: false
      },
      alertShow: {
        type: Boolean,
        default: false
      },
      prompt: {
        type: Boolean,
        default: false
      },
      placeholder: {
        type: String,
        default: ""
      },
      content: {
        default: "确定"
      },
      buttons: {
        default: () => []
      }
    },
    data(){
      return {
        promptValue: ""
      }
    },
    methods: {
      _btnClick(v){
        if (this.prompt) {
          let a = {
            index: v,
            value: this.promptValue
          };
          if (v === 1) {
            setTimeout(() => {
              this.promptValue = "";
            }, 50);
          }
          this.$emit("btnCall", a);
        } else {
          this.$emit("btnCall", v);
        }
      },
    }
  }
</script>

<style scoped>
  .a-wrap {
    position: fixed;
    z-index: 9998;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    height: 100%;
    width: 100%;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    justify-content: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
  }

  .a-wrap2 {
    position: fixed;
    z-index: 9998;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    height: 100%;
    width: 100%;
    background: rgba(0, 0, 0, 0.4);
    transition: all .3s ease;
    -webkit-transition:all .3s ease;
    -moz-transition:all .3s ease; /* Firefox 4 */
    -o-transition:all .3s ease; /* Opera */
  }

  .a-wrap-animate {
    opacity: 0;
  }

  .wrapActive {
    opacity: 1;
  }

  .popup-wrap {
    z-index: 9999;
    overflow: hidden;
    width: 66%;
    max-width: 360px;
    text-align: center;
    border-radius: 6px;
    -webkit-transition: all .4s ease;
    transition: all .3s ease;
    -webkit-transform: scale(1.08);
    transform: scale(1.08);
    background: #f8f8f8;
  }

  .popup-animate {
    opacity: 0;
    -webkit-transform: scale(.92);
    transform: scale(.92);
  }

  .popup-animate-out {
    opacity: 0;
    -webkit-transform: scale(1);
    transform: scale(1);
  }

  .popup-inner {
    position: relative;
    padding: 12px;
    border-radius: 6px 6px 0 0;
  }

  .popup-inner:after {
    position: absolute;
    z-index: 15;
    top: auto;
    right: auto;
    bottom: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 1px;
    content: '';
    -webkit-transform: scaleY(.5);
    transform: scaleY(.5);
    -webkit-transform-origin: 50% 100%;
    transform-origin: 50% 100%;
    background-color: rgba(0, 0, 0, .2);
  }

  .popup-text {
    font-family: inherit;
    font-size: 14px;
    color: #2e2e2e;
    margin: 5px 0 0;
  }

  .popup-text-b {
    font-family: inherit;
    font-size: 14px;
    margin: 5px 0 0;
  }

  .popup-buttons {
    position: relative;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    height: 44px;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
  }

  .popup-button {
    font-size: 15px;
    line-height: 44px;
    position: relative;
    display: block;
    overflow: hidden;
    box-sizing: border-box;
    width: 100%;
    height: 44px;
    padding: 0 5px;
    cursor: pointer;
    text-align: center;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: #007aff;
    -webkit-box-flex: 1;
  }

  .popup-button:first-child {
    border-radius: 0 0 0 6px;
    /*color: #ff4c23;*/
  }

  .popup-button:last-child {
    border-radius: 0 0 6px;
    font-weight: 600;
  }

  .popup-button:not(:last-child):after {
    position: absolute;
    z-index: 15;
    top: 0;
    right: 0;
    bottom: auto;
    left: auto;
    display: block;
    width: 1px;
    height: 100%;
    content: '';
    background-color: rgba(0, 0, 0, .2);
  }

  .popup-input {
    font-size: 14px;
    width: 100%;
    height: 26px;
    margin: 15px 0 0;
    padding: 0 5px;
    box-sizing: border-box;
    border: 1px solid rgba(0, 0, 0, .3);
    border-radius: 0;
    background: #fff;
  }
</style>
